<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
  </style>
</head>
<body>
  <div id="app">
    <!-- 步骤1-绘制静态的页面 -->
    <!-- 省 -->
    <!-- 步骤7-渲染下拉 -->
    <!-- 步骤8-实现下拉的联动,选择了省,给市列表添加数据 -->
    <select v-model="provinceCode" @change="provinceAdd">
        <option v-for="(item, index) in provinceList" :key="index" :value="item">{{item}}</option>
    </select>
    <!-- 市 -->
    <select  v-model="cityCode" @change="cityAdd">
        <option v-for="(item, index) in cityList" :key="index" :value="item">{{item}}</option>
    </select>
    <!-- 区 -->
    <select v-model="areaCode">
        <option v-for="(item, index) in areaList" :key="index" :value="item">{{item}}</option>
    </select>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script>
    axios.defaults.baseURL = 'http://ajax-api.itheima.net/api'
    new Vue({
    el:'#app',
    data:{
      provinceCode:'',
      cityCode:'',
      areaCode:'',
      provinceList:[],
      cityList:[],
      areaList:[]
    },
    methods:{
      btn(){
        axios.get('/province').then(res =>{
        console.log(res);
        this.provinceList = res.data.data
        this.provinceCode = this.provinceList[0]
        this.provinceAdd()
      })
      },
      provinceAdd(){
        axios.get('/city',{params:{pname:this.provinceCode}})
        .then(res =>{
          console.log(res);
          this.cityList = res.data.data
          this.cityCode = this.cityList[0]
          this.cityAdd()
        })
      },
      cityAdd(){
        axios.get('/area',{params:{pname:this.provinceCode,cname:this.cityCode}})
        .then(res =>{
          console.log(res);
          this.areaList = res.data.data
          this.areaCode = this.areaList[0]
        })
      }
    },
    created() {
      this.btn()
    },
    })
  </script>
</body>
</html>